<template>
  <div class='xtx-wrapper'>
    <div class="container">
      <xtx-bread>评价晒单</xtx-bread>
      <div class="member-comment-publish-page">
        <div class="product">
          <comment-goods></comment-goods>
          <div class="order-info">
            <p><span>订单编号：</span>62205697599</p>
            <p><span>下单时间：</span>2020-05-16 15:06:20</p>
          </div>
        </div>
        <div class="publish">
          <dl class="form-item">
            <dt>商品评分：</dt>
            <dd>
              <comment-score v-model="comment.score"></comment-score>
            </dd>
          </dl>
          <dl class="form-item">
            <dt>印象标签：</dt>
            <dd>
              <comment-tags v-model="comment.tag"></comment-tags>
            </dd>
          </dl>
          <dl class="form-item">
            <dt>填写评价：</dt>
            <dd>
              <comment-text v-model="comment.text"></comment-text>
            </dd>
          </dl>
          <dl class="form-item">
            <dt>评价晒单：</dt>
            <dd>
              <comment-upload v-model="comment.images"></comment-upload>
            </dd>
          </dl>
          <div class="form-footer">
            <xtx-button size="large">提交</xtx-button>
            <xtx-checkbox>匿名评价</xtx-checkbox>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CommentGoods from './components/comment-goods'
import CommentScore from './components/comment-score'
import CommentTags from './components/comment-tags'
import CommentText from './components/comment-text'
import CommentUpload from './components/comment-upload'
export default {
  name: 'member-comment-publish-page',
  components: { CommentGoods, CommentScore, CommentTags, CommentText, CommentUpload },
  data () {
    return {
      comment: {
        score: 0,
        tag: '',
        text: '',
        images: [
          'http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/new_goods_1.jpg',
          'http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/new_goods_2.jpg'
        ]
      }
    }
  }
}
</script>

<style scoped lang='less'>
.member-comment-publish-page {
  display: flex;
  background: #fff;
  margin-bottom: 20px;
  .product {
    padding: 20px 60px;
    border-right: 1px solid #f5f5f5;
    .comment-goods-item {
      margin-bottom: 0;
      margin-right: 0;
      &:hover {
        box-shadow: none;
      }
    }
    .order-info {
      border-top: 1px solid #f5f5f5;
      padding-top: 24px;
      line-height: 32px;
      p {
        span {
          color: #999;
        }
      }
    }
  }
  .publish {
    padding: 40px 20px;
    .form-item {
      display: flex;
      padding-bottom: 32px;
      line-height: 20px;
      dt {
        color: #999;
        width: 100px;
        text-align: right;
      }
      dd {
        flex: 1;
        padding-left:10px;
        padding-right:50px;
      }
    }
    .form-footer {
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 120px;
      justify-content: space-around;
      margin-top: 100px;
    }
  }
}
</style>
